<template>
  <div class="Home_Box">
    <el-container>
      <el-aside width="200px">
        <div class="MenuBox_box">
          <el-menu router class="Menu-box">
            <div class="Ment_TitleBox"></div>
            <el-menu-item
              v-for="item in MenuList"
              :class="
                item.router == route.path ? 'Menuitem_boxAct' : 'Menuitem_box'
              "
              :index="item.router"
              :key="item.name"
            >
              <div
                :class="item.router == route.path ? item.iconAct : item.icon"
              ></div>
              <span>{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </div></el-aside
      >
      <el-container>
        <el-header>
          <div class="TitleTop_Box">
            <div class="TitleTop_center">
              <div
                :class="
                  TltleTopAct == item.name
                    ? 'TitleTop_centeritemAct'
                    : 'TitleTop_centeritem'
                "
                v-for="item in TltleTopList"
                @click="addTltleTop(item)"
                :key="item.name"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </el-header>
        <el-main>
          <div class="Center_Box">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
// 得到 ruote
const route = useRoute()
// 得到 router 对象
const router = useRouter()
onMounted(() => {
  rtnMenuList("规划建设")
  console.log(route.path)
})
const TltleTopAct = ref("规划建设")
const TltleTopList = ref([
  {
    name: "规划建设",
    children: [
      {
        name: "现有学校",
        icon: "Menuitem_XYXXicon",
        iconAct: "Menuitem_XYXXiconAct",
        router: "/Guihuajianshe/Existing_schools"
      },
      {
        name: "在建学校",
        icon: "Menuitem_ZJXXicon",
        iconAct: "Menuitem_ZJXXiconAct",
        router: "/Guihuajianshe/School_construction"
      },
      {
        name: "规划学校",
        icon: "Menuitem_GHJSicon",
        iconAct: "Menuitem_GHJSiconAct",
        router: "/Guihuajianshe/Planning_schools"
      }
    ]
  },
  {
    name: "教师管理",
    children: [
      {
        name: "教师管理"
      },
      {
        name: "教师管理"
      },
      {
        name: "教师管理"
      }
    ]
  },
  {
    name: "学生管理",
    children: [
      {
        name: "学生管理"
      },
      {
        name: "学生管理"
      },
      {
        name: "学生管理"
      }
    ]
  },
  {
    name: "安全管理",
    children: [
      {
        name: "安全管理"
      },
      {
        name: "安全管理"
      },
      {
        name: "安全管理"
      }
    ]
  },
  {
    name: "教研学管理",
    children: [
      {
        name: "教研学管理"
      },
      {
        name: "教研学管理"
      },
      {
        name: "教研学管理"
      }
    ]
  }
])
const MenuList = ref([])
const rtnMenuList = (e) => {
  // console.log(e)
  let aaa = []
  TltleTopList.value.forEach((item) => {
    if (item.name == e) {
      aaa = item.children
    }
  })
  MenuList.value = aaa
}
const addTltleTop = (e) => {
  TltleTopAct.value = e.name
  rtnMenuList(e.name)
}
</script>

<style lang="less" scoped>
.el-main {
  width: 100%;
  height: 100%;
  background-color: rgba(245, 247, 250);
}

.el-header {
  width: 100%;
  height: 60px;
}

.el-aside {
  height: 100vh;
  background-color: black;
}
.Home_Box {
  width: 100%;
  height: 100%;
  .MenuBox_box {
    width: 200px;
    height: 100%;
    .Menu-box {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255);
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.0782);
      .Ment_TitleBox {
        width: 100%;
        height: 94px;
        background: url("@/assets/Menu/TITLE.png") no-repeat center;
        background-size: 100% 100%;
      }
      .Menuitem_box {
        margin: auto;
        margin-top: 5px;
        width: 90%;
        height: 50px;
        display: flex;
        align-items: center;
        padding: 16px 6px 16px 36px;
        gap: 10px;
        border-radius: 10px;
        box-sizing: border-box;
      }
      .Menuitem_boxAct {
        margin: auto;
        margin-top: 5px;
        width: 90%;
        height: 50px;
        display: flex;
        align-items: center;
        padding: 16px 6px 16px 36px;
        gap: 10px;
        border-radius: 10px;
        background: rgba(52, 138, 208, 0.1);
        box-sizing: border-box;
        color: rgba(83, 152, 196);
      }
      .Menuitem_XYXXicon {
        width: 18px;
        height: 18px;
        background: url("@/assets/Menu/ICON-XYXX-MR.svg") no-repeat center;
        background-size: 100% 100%;
      }
      .Menuitem_XYXXiconAct {
        width: 18px;
        height: 18px;
        background: url("@/assets/Menu/ICON-XYXX-DJ.svg") no-repeat center;
        background-size: 100% 100%;
      }
      .Menuitem_ZJXXicon {
        width: 18px;
        height: 18px;
        background: url("@/assets/Menu/ICON-ZJXX-MR.svg") no-repeat center;
        background-size: 100% 100%;
      }
      .Menuitem_ZJXXiconAct {
        width: 18px;
        height: 18px;
        background: url("@/assets/Menu/ICON-ZJXX-DJ.svg") no-repeat center;
        background-size: 100% 100%;
      }
      .Menuitem_GHJSicon {
        width: 18px;
        height: 18px;
        background: url("@/assets/Menu/ICON-GHXX-MR.svg") no-repeat center;
        background-size: 100% 100%;
      }
      .Menuitem_GHJSiconAct {
        width: 18px;
        height: 18px;
        background: url("@/assets/Menu/ICON-GHXX-DJ.svg") no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
  .TitleTop_Box {
    width: 85%;
    height: 68px;
    display: flex;
    .TitleTop_center {
      margin: auto;
      width: 695px;
      height: 68px;
      display: flex;
      justify-content: space-between;
      .TitleTop_centeritem {
        cursor: pointer;
        width: 124px;
        height: 68px;
        font-family: Microsoft YaHei;
        font-size: 18px;
        font-weight: bold;
        line-height: normal;
        text-align: center;
        letter-spacing: normal;
        line-height: 68px;
        color: rgba(153, 153, 153);
      }
      .TitleTop_centeritemAct {
        cursor: pointer;
        width: 124px;
        height: 68px;
        background: url("@/assets/Menu/YJAN-DJ.svg") no-repeat center;
        background-size: 100% 100%;
        font-family: Microsoft YaHei;
        font-size: 18px;
        font-weight: bold;
        line-height: normal;
        text-align: center;
        letter-spacing: normal;
        line-height: 68px;
        color: rgba(84, 152, 197);
      }
    }
  }
  .Center_Box {
    width: 100%;
    height: 100%;
    align-self: auto;
  }
}
</style>
